<template>
  <view class="success-page">
    <image
        src="/static/bg11.jpg"
        mode="aspectFill"
        class="bg-image">
    </image>
    <view class="success-container">
      <!-- 成功标题 -->
      <image src="/static/images/upload_success.png" class="success-image"></image>
      <text class="success-title">上传成功</text>
      <!-- 提示信息 -->
      <view class="success-message">
        <text class="message-text">*可通过</text>
        <text class="message-text">首页“信息修改”</text>
        <text class="message-text">修改作品信息</text>
        <view class="time-range">
          <text>报名投稿时间即日起到8月31日，在此期间可自行修改报名信息和作品图，主办方将以投稿投到关闭前提交的最后一次信息为准</text>
        </view>
      </view>
    </view>

    <view>
      <text class="back-btn" @click="goBack">返回</text>
      <image class="cloud-image"
             src="/static/images/yunduo.png"  ></image>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      // this.$tab.reLaunch('/pages/login');
      setTimeout(() => {
        uni.navigateBack({ delta: 3 });
      }, 500);
    }
  }
}
</script>

<style>

@font-face {
  font-family: 'minikt';
  src: url('@/static/font/minikt.TTF') format('truetype');
}
.success-page {
  position: relative;
  width: 100%;
  height: 100vh;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让背景在底层 */
}

.success-container {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 40px 30px;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  transform: translate(5%, 40%); /* 调整 translateX 为 5%，使左右间距一致 */
  z-index: 1;
  height: 60%; /* 增加高度以容纳更多内容 */
}

.success-image {
  width: 200rpx; /* 调整图片宽度 */
  height: 150rpx; /* 调整图片高度 */
  margin-bottom: 0rpx; /* 减小图片与标题之间的间距 */
}

.success-title {
  color: #004AAC;
  font-size: 60rpx;
  font-weight: bold;
  font-family: 'minikt', sans-serif;
  margin-bottom: 30px;
  display: block;
}

.success-message {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 30px;
  text-align: left;
}

.message-text {
  font-size: 30rpx;
  display: inline;
}

.highlight-text {
  color: #ff0000;
  font-weight: bold;
  margin: 0 5px;
}

.time-range {
  margin-top: 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}


.back-btn {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3; /* 确保按钮在上层 */
  color: #004AAC;
  font-size: 50rpx;
  font-family: 'minikt', sans-serif;
  text-align: center;
  display: block;
  padding: 10px 20px;
  border-radius: 10px;
}

.cloud-image {
  position: absolute;
  bottom: 58rpx;
  left: 50%;
  transform: translateX(-48%);
  width: 360rpx; /* 调整宽度为600rpx */
  height: 200rpx;
  z-index: 2; /* 确保图片在下层 */
  opacity: 0.8; /* 添加透明度，使白云图案与背景图融合 */
}
</style>